<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<qmy-custom-navbar :top="60" :title="'精选活动'"></qmy-custom-navbar>
		<!-- #endif -->
		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>
		<!-- 搜索框 -->
		<view class="pos-fixed w-100" :style="{top:menuObject.top + menuObject.height +'px'}" style="z-index: 19;">
			<view class="ping-20">
				<!-- #ifdef MP-WEIXIN -->
				<view class="bac-col-fa flex-dir-row ali-item-cen ping-13-25 br-200">
				<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view class="bac-col-f flex-dir-row ali-item-cen ping-13-25 br-200">
					<!-- #endif -->
						<text class="iconfont ic-sousuo col-00ba31 fs-40 mr-10"></text>
						<input class="fs-24 w-100" type="text" confirm-type="search" v-model="searchValue"
							placeholder="点击搜索活动" placeholder-style="color:#0a2e365e" @confirm="search" />
						<text v-if="searchValue.length" class="iconfont  ic-qingchu fs-40 col-0a2e36"
							@click="clearIcon" />
					</view>
				</view>
			</view>
			<view>
				<!-- 如果活动列表为空 -->
				<view v-if="activityData.length == 0 || (activityDataLeft.length == 0 && activityDataRight.length == 0)"
					class="activity-empty-box">
					<image class="activity-empty-image"
						src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/activity-mepty.png"
						mode="scaleToFill" />
					<view class="fs-28 fw-600">暂无活动</view>
				</view>
				<!-- 瀑布流内容 -->
				<view v-else class="flex-x-bet ping-15"
					:style="{paddingTop:menuObject.top + menuObject.height + 68 +'px'}">
					<view class="waterfall-column">
						<view class="mb-15 bac-col-f br-10 overflow-h animate__fadeIn dh-0-4s"
							v-for="(item, index) in activityDataLeft" :key="index">
							<image @click="$NavigateTo(`../detail/detail?id=${item._id}`)" :src="item.imgs[0].src"
								mode="widthFix" style="width: 100%;height: auto;display: block;">
							</image>
							<view class="ping-15">
								<view class="item-title fs-28  text-element-2"
									@click="$NavigateTo(`../detail/detail?id=${item._id}`)">{{item.name}}</view>
								<view class="flex-x-bet ali-item-cen mt-10 fs-24">
									<view @click="$NavigateTo(`/qmy_user/user/myPage?usid=${item.user_id}`)"
										class="flex-1 ali-item-cen">
										<qmy-gender-border iconWidth="15rpx" iconHeight="15rpx" iconSize="12rpx"
											iconLineHeight="15rpx" :gender="item.create_user_gender"
											:avatar="item.create_user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
											:avatarWidth="40 + 'rpx'" :avatarHeight="40 + 'rpx'"></qmy-gender-border>
										<text
											class="nickname col-87 text-element-1 ml-10">{{item.create_user_name || '匿名用户'}}</text>
									</view>
									<view class="col-b1 ali-item-cen">
										<text class="mr-5">{{item.user_info.length}}</text>
										<text class="fs-24">人报名</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="waterfall-column">
						<view class="mb-15 bac-col-f br-10 overflow-h animate__fadeIn dh-0-4s"
							v-for="(item, index) in activityDataRight" :key="index">
							<image @click="$NavigateTo(`../detail/detail?id=${item._id}`)" :src="item.imgs[0].src"
								mode="widthFix" style="width: 100%;height: auto;display: block;">
							</image>
							<view class="ping-15">
								<view class="item-title fs-28  text-element-2"
									@click="$NavigateTo(`../detail/detail?id=${item._id}`)">{{item.name}}</view>
								<view class="flex-x-bet ali-item-cen mt-10 fs-24">
									<view @click="$NavigateTo(`/qmy_user/user/myPage?usid=${item.user_id}`)"
										class="flex-1 ali-item-cen">
										<qmy-gender-border iconWidth="15rpx" iconHeight="15rpx" iconSize="12rpx"
											iconLineHeight="15rpx" :gender="item.create_user_gender"
											:avatar="item.create_user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
											:avatarWidth="40 + 'rpx'" :avatarHeight="40 + 'rpx'"></qmy-gender-border>
										<text
											class="nickname col-87 text-element-1 ml-10">{{item.create_user_name || '匿名用户'}}</text>
									</view>
									<view class="col-b1 ali-item-cen">
										<text class="mr-5">{{item.user_info.length}}</text>
										<text class="fs-24">人报名</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 底部logo -->
				<qmy-logo></qmy-logo>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: {
					height: 15,
					top: 0
				},
				// #endif
				searchValue: '',
				activityData: [], // 所有数据
				activityDataLeft: [], // 左列数据
				activityDataRight: [], // 右列数据
				dataLoaded: false, // 加载状态
				originalData: [], // 保存原始数据
			}
		},
		onLoad() {
			this.getActivityData(); //获取活动数据
		},
		methods: {
			//获取活动数据
			getActivityData() {
				this.$Route('get-public-data', true).getActivityData({
					is_recommend: true
				}).then((res) => {
					this.activityData = res.data;
					this.originalData = [...res.data]; // 保存原始数据
					this.activityDataLeft = this.activityData.slice(0, Math.ceil(this.activityData.length / 2));
					this.activityDataRight = this.activityData.slice(Math.ceil(this.activityData.length / 2));
					this.dataLoaded = true;
					this.$emit('refreshState', false) //重置刷新状态
				}).catch((err) => {
					this.dataLoaded = true;
					this.$emit('refreshState', false) //重置刷新状态
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			// 搜索
			search() {
				console.log(this.searchValue);
				// 正则表达式模糊搜索活动名称
				if (!this.searchValue.trim()) {
					this.activityData = [...this.originalData];
					this.activityDataLeft = this.activityData.slice(0, Math.ceil(this.activityData.length / 2));
					this.activityDataRight = this.activityData.slice(Math.ceil(this.activityData.length / 2));
					return;
				}
				let reg = new RegExp(this.searchValue, 'i');
				let filteredData = this.originalData.filter(item => reg.test(item.name));
				this.activityDataLeft = filteredData.slice(0, Math.ceil(filteredData.length / 2));
				this.activityDataRight = filteredData.slice(Math.ceil(filteredData.length / 2));
			},
			// 清除搜索框
			clearIcon() {
				this.searchValue = '';
				this.activityData = [...this.originalData];
				this.activityDataLeft = this.activityData.slice(0, Math.ceil(this.activityData.length / 2));
				this.activityDataRight = this.activityData.slice(Math.ceil(this.activityData.length / 2));
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background: #f7f7f7;
	}

	.waterfall-column {
		width: 49%;
	}

	.item-title {
		line-height: 1.4;
	}

	.avatar {
		width: 40rpx !important;
		height: 40rpx !important;
	}

	.nickname {
		max-width: 120rpx;
	}
</style>